<template>
	<view class="crm">
		<view class="custom_header" style="height: {{navH}}px">
			<view>CRM</view>
			<view></view>
			<view>
				<img src="/static/sousuo.png" alt="" class="img" @click="qiaoSousuo">
				<img src="/static/shezhi.png" alt="" class="img" @click="qiaoshezhi" style="margin-right: 35px;">
			</view>
		</view>
		<view class="crmcontent">
			<view class="one">
				<view @click="kehu1">
					<img src="/static/img/1.png" alt="" style="width: 50px;height: 50px;">
					<p>客户管理</p>
				</view>
				<view @click="xiaoshou1">
					<img src="/static/img/2.png" alt="" style="width: 50px;height: 50px;">
					<p>销售线索</p>
				</view>
				<view @click="shangji1">
					<img src="/static/img/3.png" alt="" style="width: 50px;height: 50px;">
					<p>商机管理</p>
				</view>
				<view @click="dingdan1">
					<img src="/static/img/4.png" alt="" style="width: 50px;height: 50px;">
					<p>订单管理</p>
				</view>
				<view @click="lianxiren1">
					<img src="/static/img/5.png" alt="" style="width: 50px;height: 50px;">
					<p>联系人</p>
				</view>
				<view>
					<img src="/static/img/6.png" alt="" style="width: 50px;height: 50px;">
					<p>统计报表</p>
				</view>
				<view @click="caiwu1">
					<img src="/static/img/7.png" alt="" style="width: 50px;height: 50px;">
					<p>财务管理</p>
				</view>
				<view @click="genjin1">
					<img src="/static/img/8.png" alt="" style="width: 50px;height: 50px;">
					<p>跟进记录</p>
				</view>
				<view @click="chanpin1">
					<img src="/static/img/9.png" alt="" style="width: 50px;height: 50px;">
					<p>产品列表</p>
				</view>
				<view @click="yingxiao1">
					<img src="/static/img/10.png" alt="" style="width: 50px;height: 50px;">
					<p>营销活动</p>
				</view>
				<view @click="jingzheng1">
					<img src="/static/img/11.png" alt="" style="width: 50px;height: 50px;">
					<p>竞争对手</p>
				</view>
				<view @click="yeji1">
					<img src="/static/img/12.png" alt="" style="width: 50px;height: 50px;">
					<p>业绩目标</p>
				</view>
			</view>
			<view class="two">
				<view class="two_q">
					<view style="font-weight: bold;">回款排名</view>
					<qiaoshaixuantankuang></qiaoshaixuantankuang>
				</view>
				<ul class="zhao">
					<li class="zhao_li" v-for="(item, index) in   qiaoList  " :key="index">

						<view class="yi">{{ item.yi }}</view>
						<view>
							<img :src="item.images" alt="" class="two_a" @click="gang">
							<span>{{ item.names }}</span>
						</view>
						<view>{{ item.xiao }}</view>
						<view>{{ item.price }}</view>
					</li>
				</ul>
			</view>
			<view class="san">
				<view class="two_q">
					<view style="font-weight: bold;">数据简报</view>
					<view>
						<qiaoshaixuantankuang></qiaoshaixuantankuang>
					</view>
				</view>
				<ul class="jian">
					<li class="jian_a" v-for="(item, index) in   qiaolist  " :key="index">
						<view @click="xinzeng">{{ item.nameq }}</view>
						<view @click="kehuguanli">{{ item.namew }}</view>
						<view @click="shangji">{{ item.namee }}</view>
						<view @click="dingdan">{{ item.namer }}</view>
						<view @click="lianxiren">{{ item.namet }}</view>
						<view @click="genjicishu">{{ item.namey }}</view>
						<view @click="chulirenwu">{{ item.nameu }}</view>
						<view @click="chulidingdan">{{ item.namei }}</view>
						<view @click="xinzeng" style="margin-top: 15px;">{{ item.titleq }}</view>
						<view @click="kehuguanli" style="margin-top: 15px;">{{ item.titlew }}</view>
						<view @click="shangji" style="margin-top: 15px;">{{ item.titlee }}</view>
						<view @click="dingdan" style="margin-top: 15px;">{{ item.titler }}</view>
						<view @click="lianxiren" style="margin-top: 15px;">{{ item.titlet }}</view>
						<view @click="genjicishu" style="margin-top: 15px;">{{ item.titley }}</view>
						<view @click="chulirenwu" style="margin-top: 15px;">{{ item.titleu }}</view>
						<view @click="chulidingdan" style="margin-top: 15px;">{{ item.titlei }}</view>
					</li>
				</ul>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { ref } from "vue";
import qiaoshaixuantankuang from '@/pages/qiao-crm/qiao-sousuo/qiaoshezhi/qiaoshaixuantankuang.vue'
const qiaoList = [

	{ id: 20, yi: "1", names: '赵小刚', xiao: "销售部", images: '/static/img/1.png', price: '￥100,1000.00' },
	{ id: 21, yi: "2", names: '赵小刚', xiao: "销售部", images: '/static/img/1.png', price: '￥100,1000.00' },
	{ id: 22, yi: "3", names: '赵小刚', xiao: "销售部", images: '/static/img/1.png', price: '￥100,1000.00' },
	{ id: 23, yi: "4", names: '赵小刚', xiao: "销售部", images: '/static/img/1.png', price: '￥100,1000.00' },
	{ id: 24, yi: "5", names: '赵小刚', xiao: "销售部", images: '/static/img/1.png', price: '￥100,1000.00' },
	{ id: 25, yi: "6", names: '赵小刚', xiao: "销售部", images: '/static/img/1.png', price: '￥100,1000.00' },
	{ id: 26, yi: "7", names: '赵小刚', xiao: "销售部", images: '/static/img/1.png', price: '￥100,1000.00' },
	{ id: 27, yi: "8", names: '赵小刚', xiao: "销售部", images: '/static/img/1.png', price: '￥100,1000.00' },
	{ id: 28, yi: "9", names: '赵小刚', xiao: "销售部", images: '/static/img/1.png', price: '￥100,1000.00' },
	{ id: 29, yi: "10", names: '赵小刚', xiao: "销售部", images: '/static/img/1.png', price: '￥100,1000.00' },
]
const qiaolist = ref([
	{
		nameq: '新增客户',
		titleq: '200'
	},
	{
		namew: '新增线索',
		titlew: '200'
	},
	{
		namee: '新增商机',
		titlee: '200'
	},
	{
		namer: '新增订单',
		titler: '200'
	},
	{
		namet: '新增联系人',
		titlet: '200'
	},
	{
		namey: '跟进次数',
		titley: '200'
	},
	{
		nameu: '处理任务',
		titleu: '200'
	},
	{
		namei: '处理订单',
		titlei: '200'
	},
])
const qiaoSousuo = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiao-sousuo/qiaoSousuo'
	})
}
const qiaoshezhi = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiao-sousuo/qiaoshezhi/qiaoshezhi'
	})
}
const gang = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiao-sousuo/qiaotouxiang'
	})
}
const kehuguanli = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiao-sousuo/qiaoshezhi/qiaokehuguanli'
	})
}
const xinzeng = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaoxinzeng'
	})
}
const shangji = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaoshangji'
	})
}
const dingdan = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaoding'
	})
}
const lianxiren = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaoxinlianxi'
	})
}
const genjicishu = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaoxingenjin'
	})
}
const chulirenwu = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaochulirenwu'
	})
}
const chulidingdan = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaochulidingdan'
	})
}
const kehu1 = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaoxinzeng'
	})
}
const xiaoshou1 = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaoxiansuoguanli'
	})
}
const shangji1 = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaoshangji'
	})
}
const dingdan1 = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaoding'
	})
}
const lianxiren1 = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaoxinlianxi'
	})
}
const genjin1 = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaoxingenjin'
	})
}
const caiwu1 = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaocaiwuguanli'
	})
}
const yingxiao1 = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaoyingxiao'
	})
}
const chanpin1 = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaochanpin'
	})
}
const jingzheng1 = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaojingzheng'
	})
}
const yeji1 = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiaoguanli/qiaoyeji'
	})
}

</script>
  
<style scoped lang="scss">
.crmcontent {
	height: calc(100vh - 40px - 0px);
	overflow: hidden;
	overflow-y: scroll;

}

.custom_header {
	display: flex;
	justify-content: space-between;
	width: 100vw;
	height: 40px;
	line-height: 40px;
	font-weight: bold;
	z-index: 99;
	background-color: #fff;
	padding: 10px 10px;
	margin-top: 30px;
}

.img {
	width: 20px;
	height: 20px;
	margin-right: 10px;
}

.one {
	width: 310px;
	overflow: hidden;
	background-color: white;
	box-shadow: 0 0 10px #ccc;
	margin-top: 10px;
	margin-left: 8px;
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	padding: 20px 20px;
	flex-wrap: wrap;
	text-align: center;

	view {
		width: 70px;
	}
}

.crm {
	width: 100vw;
	height: 100vh;
}

.two {
	width: 350px;
	height: 800px;
	border-radius: 10px;
	margin-top: 10px;
	box-shadow: 0 0 10px #ccc;
	background-color: white;
	margin-left: 10px;
}

.two_q {
	display: flex;
	justify-content: space-between;
	padding: 10px 10px;

	.two_img {
		width: 20px;
		height: 23px;
		vertical-align: middle;
	}
}

.zhao {
	display: flex;
	justify-content: space-between;
	padding: 10px 10px;
	flex-wrap: wrap;
}

.zhao_li {

	width: 350px;
	align-items: center;
	justify-content: center;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #ccc;
	height: 70px;
}

.two_a {
	vertical-align: middle;
	width: 50px;
	height: 50px;
}

.yi {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: rgb(215, 215, 215);
	color: white;
	text-align: center;
}

.san {
	width: 350px;
	margin-left: 10px;
	height: 200px;
	border-radius: 10px;
	margin-top: 10px;
	box-shadow: 0 0 10px #ccc;
}

.jian {
	display: flex;
	text-align: center;
	flex-wrap: wrap;
}

.jian_a {
	width: 80px;
	height: 80px;
	margin-left: 5px;
}
</style>
  

